// App.js
import React, { useState } from 'react';
import './GradeQA.css'; // 导入 CSS 文件

// FastAPI 后端的 URL
// 确保您的 FastAPI 服务正在运行并且此 URL 是可访问的
// 如果 FastAPI 运行在不同端口或主机，请相应修改
const FASTAPI_URL = '/api';

function GradeQA() {
    const [question, setQuestion] = useState('');
    const [answer, setAnswer] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState('');
    // isButtonHovered 状态不再需要，因为 :hover 伪类在 CSS 中处理

    const handleSubmit = async (e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        if (!question.trim()) {
            setError('问题不能为空！');
            setAnswer('');
            return;
        }

        setIsLoading(true);
        setAnswer('');
        setError('');

        try {
            // 使用 fetch 发送 POST 请求到 FastAPI 后端
            const response = await fetch(`${FASTAPI_URL}/ask`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ content: question }),
            });

            // 检查响应是否成功 (status in the range 200-299)
            if (!response.ok) {
                // 如果响应状态码不是 2xx，尝试解析错误信息
                let errorData;
                try {
                    errorData = await response.json(); // FastAPI 通常会返回 JSON 格式的错误详情
                } catch (parseError) {
                    // 如果错误响应不是 JSON，使用状态文本
                    throw new Error(response.statusText || `请求失败，状态码：${response.status}`);
                }
                throw new Error(errorData.detail || `请求失败，状态码：${response.status}`);
            }

            const data = await response.json(); // 解析 JSON 响应体

            if (data && data.content) {
                setAnswer(data.content);
            } else if (data && data.error) {
                setError(`后端错误: ${data.error}`);
            } else {
                setError('未能获取有效答案。');
            }
        } catch (err) {
            console.error("请求错误:", err);
            // fetch 的网络错误 (例如 DNS 解析失败, CORS 问题在浏览器层面阻止) 通常会直接抛出 TypeError
            // HTTP 错误状态 (如 4xx, 5xx) 会在 !response.ok 检查中被捕获并作为 Error 抛出
            if (err instanceof TypeError) { // 通常是网络问题或 CORS
                setError(`网络错误或CORS问题: 无法连接到服务器。请检查后端服务 (${FASTAPI_URL}) 是否运行并配置了CORS。`);
            } else {
                setError(`发生错误: ${err.message}`);
            }
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="qa-panel"> {/* 使用 className 而不是 style */}
            <form onSubmit={handleSubmit} className="form">
                <textarea
                    className="textarea"
                    value={question}
                    onChange={(e) => setQuestion(e.target.value)}
                    placeholder="在这里输入您的问题..."
                    rows={3}
                    disabled={isLoading}
                />
                <button
                    type="submit"
                    className="button" // 应用 button 类
                    disabled={isLoading}
                // onMouseEnter 和 onMouseLeave 不再需要，CSS :hover 处理悬停效果
                >
                    {isLoading ? '思考中...' : '提问'}
                </button>
            </form>

            {error && (
                <div className="errorText">
                    <p>{error}</p>
                </div>
            )}

            {isLoading && !error && (
                <p className="loadingText">正在努力寻找答案，请稍候...</p>
            )}

            {answer && !isLoading && !error && (
                <div className="answerSection">
                    <p className="answerText">{answer}</p>
                </div>
            )}
        </div>
    );
}

export default GradeQA;
